<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>学生信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">


</head>
<body>
<div class="container">
<!--    <div class="row">-->
<!--        <div class="col">-->

<!--            <form class="form-inline container-fluid">-->
<!--                <div class="form-group">-->
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#studentModal" onclick="preAdd()">
                        新增学生
                    </button>
<!--                    <p class="form-control-static">&nbsp;&nbsp;请输入姓名</p>-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                    <label class="sr-only" for="inputName">Email address</label>-->
<!--                    <input type="name" class="form-control" id="inputName" placeholder="Name">-->
<!--                </div>-->
<!--                <button type="submit" class="btn btn-info" id="findName">查找</button>-->
<!--                <button type="submit" class="btn btn-success" id="restButton">复位</button>-->

<!--            </form>-->

            <form class="form-inline">
                <div class="form-group">
                    <label for="searchName">请输入名字</label>
                    <input type="text" class="form-control" id="searchName" placeholder="请输入名称" name="searchName">
                </div>
                <div class="form-group">
                    <label for="searchName">请输入学号</label>
                    <input type="text" class="form-control" id="searchNo" placeholder="请输入学号" name="searchNo">
                </div>

                <button type="button" class="btn btn-default btn-primary" onclick="findByNameOrNo();">查询</button>
            </form>
            <table class="table table-hover" id="stuTable">


            </table>
<!--        </div>-->
<!--    </div>-->

</div>

<!-- Modal -->
<div class="modal fade" id="studentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <input hidden="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="no">学号</label>
                        <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
                <!--                表单结束-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveStudent();">保存</button>

            </div>
        </div>
    </div>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">

    function findByNameOrNo(){

        // 模糊查询
        $('#stuTable').bootstrapTable("destroy")
        $('#searchName')
        $('#searchNo')
        loadTable();
    }

    function preAdd(){
        $("#id").val(0);//提示新增
    }
    //新增或者更新
    function saveStudent(){
        var data= $("#formStudent").serialize();
        var id=$("#id").val;
        if(id<1){
            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function (){
                loadTable();
                $('#studentModal').modal('hide')
            })//新增
        }else{
            $.ajax({
                url: "/webapi/student/update",
                method: "put",
                data: data
            }).done(function (){
                loadTable();
                $('#studentModal').modal('hide')
            })//是更新
        }
    }
    //编辑
    function editStudent(id){
        $('#studentModal').modal('show');
        $.ajax({
            url:'/webapi/student/get/'+id
        }).done(function (rs){
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#no").val("");
            $("#sex").val(rs.sex);
            $("#score").val(rs.score);


        })
    }
    //删除
    function deleteStudent(id){
        if(confirm("你真的要删除吗？")){

            $.ajax({
                url:"/webapi/student/delete/"+id,
                method:"delete"

            }).done(function(){
                $('#stuTable').bootstrapTable("destroy")
                loadTable()

            });

        }//endif


    }
//加载全部
//     function loadTable(){
//         $.ajax({
//             url:'/webapi/student/list'
//         }).done(function (rs){
//             let len=rs.length;
//             let html="";
//             for(let i=0;i<len;i++){
//                 let item=rs[i];
//                 html+="<tr>"
//                     +"<td>"+item.id+"</td>"
//                     +"<td>"+item.name+"</td>"
//                     +"<td>"+item.no+"</td>"
//                     +"<td>"+item.sex+"</td>"
//                     +"<td>"+item.score+"</td>"
//                     +"<td><a href='#' onclick='editStudent("+item.id+");'>编辑</a> <a href='#' onclick='deleteStudent("+item.id+");'>删除</a> </td>"
//                     +"</tr>";
//             }
//
//             $("#studentTb").html(html);
//         })
//
//     }

    // const prefix="http://localhost:8080";
    function loadTable(){
        $('#stuTable').bootstrapTable({
            url: "/webapi/student/getbypage",
            striped:true,//设置为true会有隔行变色效果
            pagination:true,//设置为true会在底部显示分页条
            singleSelect: false,//设置为true将禁止多选
            pageSize:3,//如果设置了分页，每页数据条数
            pageNumber:1,//如果设置了分页，首页页码
            sidePagination: "server",//设置在哪里进行分页，分页方式：client客户端分页，server服务端分页（*）
            queryParams:function(params){
                var paraObj={
                    size: params.limit,
                    page:params.offset/params.limit,
                    sort:"id",
                    direct:"desc",
                    name:$("#searchName").val(),
                    no: $('#searchNo').val()
                };
                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '序号'
            }, {
                field: 'name',
                title: '姓名'
            },{
                field: 'no',
                title: '学号'
            }, {
                field: 'sex',
                title: '性别'
            }, {
                field: 'score',
                title: '成绩'
            },{
                field: 'action',
                title: '操作',
                align: 'center',
                formatter: (value, row, index) => {
                    return "<a href='#' onclick='editStudent(" + row.id + ");'>编辑</a> <a href='#' onclick='deleteStudent(" + row.id + ");'>删除</a>"
                }


            }]
        })




    }//end of loadtable

    $(function (){

        loadTable();


    });
    // let but1 = document.getElementById("findName");
    // let but2 = document.getElementById("restButton");
    // but1.onclick = function () {
    //     let test=$("#inputName").val();
    //     $.ajax({
    //         url:'/webapi/student/name',
    //         data:{
    //             name:test,
    //         }
    //     }).done(function (rs){
    //         let len=rs.length;
    //         let html="";
    //         for(let i=0;i<len;i++){
    //             let item=rs[i];
    //             html+="<tr>"
    //                 +"<td>"+item.id+"</td>"
    //                 +"<td>"+item.name+"</td>"
    //                 +"<td>"+item.no+"</td>"
    //                 +"<td>"+item.sex+"</td>"
    //                 +"<td>"+item.score+"</td>"
    //                 +"<td><a href='#' onclick='editStudent("+item.id+");'>编辑</a> <a href='#' onclick='deleteStudent("+item.id+");'>删除</a> </td>"
    //                 +"</tr>";
    //         }
    //         $("#studentTb").html(html);
    //     })
    //     return false;
    // }
    //
    // but2.onclick = function () {
    //     document.getElementById("inputName").value='';
    //     $.ajax({
    //         url:'/webapi/student/list'
    //     }).done(function (rs){
    //         let len=rs.length;
    //         let html="";
    //         for(let i=0;i<len;i++){
    //             let item=rs[i];
    //             html+="<tr>"
    //                 +"<td>"+item.id+"</td>"
    //                 +"<td>"+item.name+"</td>"
    //                 +"<td>"+item.no+"</td>"
    //                 +"<td>"+item.sex+"</td>"
    //                 +"<td>"+item.score+"</td>"
    //                 +"<td><a href='#' onclick='editStudent("+item.id+");'>编辑</a> <a href='#' onclick='deleteStudent("+item.id+");'>删除</a> </td>"
    //                 +"</tr>";
    //         }
    //
    //         $("#studentTb").html(html);
    //     })
    //     return false;
    // }

</script>
</body>
</html>